<div class="flex justify-center space-x-1" [ngClass]="['text' + defaultInv]">
	<button
		title="previous"
		type="button"
		class="inline-flex items-center justify-center w-8 h-8 py-0 border rounded-md shadow-md"
		[ngClass]="['bg' + contrast, 'border' + default]"
	>
		<svg
			class="w-4"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="2"
			fill="none"
			stroke-linecap="round"
			stroke-linejoin="round"
		>
			<polyline points="15 18 9 12 15 6"></polyline>
		</svg>
	</button>
	<button
		type="button"
		title="Page 1"
		class="inline-flex items-center justify-center w-8 h-8 text-sm font-semibold border rounded shadow-md"
		[ngClass]="['bg' + contrast, 'text' + primary, 'border' + primary]"
	>
		1
	</button>
	<button
		*ngFor="let page of [2, 3, 4]"
		type="button"
		title="Page {{ page }}"
		class="inline-flex items-center justify-center w-8 h-8 text-sm border rounded shadow-md"
		[ngClass]="['bg' + contrast, 'border' + default]"
	>
		{{ page }}
	</button>

	<button
		title="next"
		type="button"
		class="inline-flex items-center justify-center w-8 h-8 py-0 border rounded-md shadow-md"
		[ngClass]="['bg' + contrast, 'border' + default]"
	>
		<svg
			class="w-4"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="2"
			fill="none"
			stroke-linecap="round"
			stroke-linejoin="round"
		>
			<polyline points="9 18 15 12 9 6"></polyline>
		</svg>
	</button>
</div>
